<template>
  <div id="app">
   <CommonForm
          ref="form"
          :options="formOptions"
          :form="form"
          @entranceSearch="entranceSearch"

        ></CommonForm>
  <elTable
  :colOptions="colOptions"
        :reqFun="getFun"
        :param="form"
        :add="false"
        :isSearchTable="true"
        @clearData="clearData"
        @add="add"
        ref="table"
  ></elTable>

  </div>
</template>

<script>

import elTable from './components/elTable/elTable.vue'
import CommonForm from './components/CommonForm/CommonForm.vue'
export default {
  name: 'App',
  components: {
 elTable,
 CommonForm
  },
  data(){
    return{
      formOptions: [
        [
          {
            type: 'input',
            label: '个人编码',
            field: 'code'
          },
          {
            type: 'input',
            label: '昵称',
            field: 'nickName'
          },
          {
            type: 'input',
            label: '个人手机号',
            field: 'mobile'
          }
        ],
        [
           {
            type: 'input',
            label: '姓名',
            field: 'personalName'
          },
          {
            type: 'select',
            label: '状态',
            field: 'isEnable',
            enums: {
              0: '禁用',
              1: '启用',
              '': '全部'
            }
          }
        ]
      ],
     form:{}
    }
  },
  computed: {
    colOptions() {
      return [
        {
          type:'selection'
        },
        // {
        //   type:'index'
        // },
        {
          label: '个人编码',
          prop: 'code',
           jumpTo: (row) => `/editPersonalInformation/${row.id}`
        },
        {
          label: '昵称',
          prop: 'nickName'
        },
        {
          label: '个人手机号',
          prop: 'mobile'
        },
        {
          label: '姓名',
          prop: 'personalName'

        },
        {
          label: '认证状态',
          prop: 'attestationStatusDesc'
        },
        {
          label: '状态',
          prop: 'isEnable',
          enums: {
            0: '禁用',
            1: '启用'
          }

        },
        {
          label: '创建时间',
          prop: 'createDate'
        },
        {
          label: '更新时间',
          prop: 'modifyDate'
        }

      ]
    }
  },
  methods:{
     clearData() {
      Object.assign(this.$data, this.$options.data.call(this))
    },
    add() {},
     getFun(form) {
      console.log('form', form)
      return new Promise((resolve, reject) => {
        if (this.colOptions.length > 0) {
          resolve(form)
        } else {
          reject('报错了')
        }
      })
    },
    entranceSearch(){
      this.$refs.table.search()
    }
  }
}
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
  width: 1200px;
  margin: 0 auto;
}

</style>
